<template>
  <div class="list_box">
    <div class="list_item" v-for="item in productList" :key="item.activityId" @click="clickComm(item.activityId)">
      <div class="leftImg">
        <van-image round fit="cover" width="100%" height="100%" :src="item.mainImage"/>
      </div>
      <div class="rightBox">
        <div class="title">{{ item.name }}</div>
        <div class="state">{{ statusObj[item.status] }}</div>
        <div class="other">
          <div class="price">￥{{ dealPrice(item.priceList) }}</div>
          <div class="num" v-if="item.enrollShow == '1'">已有{{ item.enrollment || 0 }}报名</div>
        </div>
      </div>
    </div>
    <van-empty v-if="productList != null && productList.length == 0" image="search" description="暂无商品列表"/>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

export default {
  name: 'ProductList',
  props: ['productList'],
  data () {
    return {
      id: 0
    }
  },
  computed: {
    ...mapState(['statusObj'])
  },
  methods: {
    ...mapMutations(['setProductId']),
    clickComm (id) {
      this.setProductId(id)
      this.$router.push('/GoodsInfo?activityId='+id)
    },
    dealPrice (priceList) {
      let price = 0
      if (priceList && priceList.length > 0) {
        price = priceList[0].money
      }
      return price.toFixed(2)
    }
  }
}
</script>

<style scoped>
.list_box {
  flex: 1 1 auto;
  overflow-y: auto;
}

.list_box .list_item {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  padding: 15px;
}

.list_box .list_item:active {
  background-color: #f1f1f1;
}

.list_box .list_item .leftImg {
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 4px;
}

.list_box .list_item .leftImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list_box .list_item .rightBox {
  flex: 1 1 auto;
  margin-left: 12px;
  padding-top: 4px;
}

.list_box .list_item .rightBox .title {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.list_box .list_item .rightBox .desc {
  font-size: 12px;
  color: #999;
  display: none;
  margin-bottom: 4px;
}

.list_box .list_item .rightBox .state {
  font-size: 12px;
  /*color: orangered;*/
  margin-bottom: 4px;
}

.list_box .list_item .rightBox .other {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.list_box .list_item .rightBox .other .price {
  color: #ff6400;
  font-weight: 600;
}

.list_box .list_item .rightBox .other .num {
  color: orangered;
}
</style>
